<template>
  <div class="flex-sc" @click="clickPoint">
    <div class="point-box"></div>
    <div class="ml-1 flex-sc px-1 rounded bg-white bg-opacity-50 backdrop-blur-lg border border-solid border-light">
      <img class="w-12" :src="info?.cover" />
      <div class="ml-1 font-bold">
        <p class="text-sm text-dark">{{ info?.value }}</p>
        <p class="text-xs text-green-600">{{ info?.desc }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  info: Object
})
function clickPoint() {
  alert(`您点击了${props.info?.value}`)
}
</script>

<style scoped lang="scss">
.point-box {
  width: 64PX;
  height: 64PX;
  background-image: url('@/assets/images/interactive.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100%;
  background-position-y: 0;
  animation: pointAnimation 2s steps(24) forwards infinite;
  animation-fill-mode: both;
}

@keyframes pointAnimation {
  0% {
    background-position: 0 0
  }

  to {
    background-position: 0 -1536PX
  }
}
</style>